<header />

<bstablecss />
<body class="boxed">

<div class="body">

    <!--header start-->
    <!--导航部分-->
    <include file="Common/header_nav" />
    <!--/导航部分-->
    <!-- /end header -->

    <div class="container">
        <div class="row-fluid">

            <div class="col-md-12  ">
                <section class="panel">
                    <div class="panel-heading">用户列表</div>
                    <div class="panel-body no-padding">

                        <div id="toolbar"></div>

                        <table class="table table-striped no-margin table-bordered" id="user-list-table">

                        </table>
                    </div>
                    <div class="panel-footer">
                        <div><a class="btn btn-success" id="add-user-btn">添加用户</a>
                            <a class="btn btn-danger" id="user-delete">批量删除所选用户</a></div>
                    </div>
                </section>
            </div>

        </div>
    </div>

    <!--footer start-->
    <include file="Common/footer" />
    <!--footer end-->
</div></body></html>



<!-- 添加用户对话框 -->
<div class="modal fade" id="add-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                添加用户<a id="add-user-classinfo" style="display: none;">all</a>
            </div>
            <div class="modal-body" >
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <td>用户名</td>
                                            <td>密码</td>
                                            <td>邮箱</td>
                                            <td>年龄</td>
                                            <td>性别</td>
                                        </tr>
                                        </thead>
                                        <tbody id="add-user-tbody">
                                        <tr>
                                            <td><input class="form-control" type="text" id="add-username" /></td>
                                            <td><input class="form-control" type="text" id="add-userpasswd"/></td>
                                            <td><input class="form-control" type="email" id="add-useremail"/></td>
                                            <td ><input class="form-control" type="number" id="add-userage"/></td>
                                            <td><input type="radio" name="sex" value="男" class="add-usersex" checked>男
                                                <input type="radio" name="sex" value="女" class="add-usersex">女</td>

                                            <td><a class="btn btn-success" id="add-user-newrow">添加一行</a></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer" >
                <a class="btn btn-success" id="add-user-save">保存</a>


            </div>
        </div>

    </div>
</div>


<!-- 编辑用户信息对话框 -->
<div class="modal fade" id="edit-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                编辑用户<a id="edit-uid" style="display: none;"></a>
            </div>
            <div class="modal-body" >
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <label for="edit-username">修改用户名</label>
                                    <input type="text" class="form-control" placeholder="修改用户名" id="edit-username">
                                    <label for="edit-useremail">修改邮箱</label>
                                    <input type="email" class="form-control" placeholder="修改用户名" id="edit-useremail">
                                    <label for="edit-userpassword">重置密码</label>
                                    <input type="email" class="form-control" placeholder="修改用户名" id="edit-userpassword">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer" >
                <a class="btn btn-success" id="edit-user-save">保存</a>

                <a id="row_username" style="display: none;"></a>
                <a id="row_useremail" style="display: none;"></a>

            </div>
        </div>

    </div>
</div>
<script src="__PUBLIC__/js/tableTools.js"></script>
<bstablejs />
<script>
    $(document).ready(function(){


//        function queryParams(para){
//            var querydata = {
//                searchkey:"123"
//            };
//
//            return querydata;
//        }

        function columns(){
            return [
                {
                    field: 'state',
                    checkbox: true
                },{
                    field:'uid',
                    title:'uid'
                },
                {
                    field:'username',
                    title:'用户名'
                },
                {
                    field:'email',
                    title:'邮箱'
                },
                {
                    field:'age',
                    title:'年龄'
                },
                {
                    field:'sex',
                    title:'性别'
                },
                {   field:'user_id',
                    title:'操作',
                    formatter:function()
                    {
                        return '<a class="btn btn-success btn-sm">修改用户信息</a>'
                    }
                }];
        }

        function onClickRow(row){
            $("#edit-uid").html(row.uid);
            $("#edit-username").val(row.username);
            $("#edit-useremail").val(row.email);

            $("#row_username").html(row.username);
            $("#row_useremail").html(row.email);

            $("#edit-user").modal('show');


            $("#edit-user-save").click(function(){
                alert("start edit"+$("#row_username").html());

                var username;
                var useremail;

                ($("#edit-username").val() == $("#row_username").html())?username='':username = $("#edit-username").val();
                ($("#edit-useremail").val() == $("#row_useremail").html())?useremail='':useremail = $("#edit-useremail").val();

                $.ajax({
                    type:"POST",
                    url:"__URL__/updateUserInfo",
                    dataType:"json",
                    async : false,
                    data:{
                        uid:$("#edit-uid").html(),
                        username:username,
                        useremail:useremail,
                        userpassword:$("#edit-userpassword").val()
                    },
                    success:function(data){
                        alert(data.msg);
                        //table.showtable();
                        $("#edit-user").modal('hide');

                    },error: function (jqXHR) {
                        alert("failed"+jqXHR.status);
                    }
                });

            });
        }

        var tabletool = new TableTools();
        tabletool.bstable("user-list-table", "__URL__/getUserList", columns(), null, onClickRow);

        $("#user-delete").click(function(){

            $.ajax({
                type:"POST",
                url:"__URL__/deleteUsers",
                dataType:"json",
                data:{
                    userlist:JSON.stringify($('#user-list-table').bootstrapTable('getSelections'))
                },
                success:function(data){
                    alert(data.msg);

                },error: function (jqXHR) {
                    alert("failed"+jqXHR.status);
                }
            });

        });

        $("#add-user-btn").click(function(){
            $("#add-user").modal('show');
        });

        $("#add-user-newrow").click(function(){
            var htmls = ['<tr>'];
            htmls.push('<td>'+$("#add-username").val()+'</td>');
            htmls.push('<td>'+$("#add-userpasswd").val()+'</td>');
            htmls.push('<td>'+$("#add-useremail").val()+'</td>');
            htmls.push('<td>' + $("#add-userage").val()+'</td>');
            htmls.push('<td>' + $("input[name='sex']:checked").val()+'</td>');
            htmls.push('<td><a class="btn btn-danger add-rowdelete">删除</a></td></tr>');
            $("#add-user-tbody").prepend(htmls.join(''));
        });

        $(document).on('click', '.add-rowdelete', function(){
            $("#add-user-tbody tr").eq($(this).parent().parent().index()).remove();
        });

        $("#add-user-save").click(function(){

            var arr = [];
            var i = 0;

            $("#add-user-tbody tr").each(function(){
                arr.push([]);
                $(this).find('td').each(function(){
                    arr[i].push($(this).text());
                });
                i ++;
                //用$(this)可以访问正在循环的元素
            });


            var json = {};
            var k = 0;

            for (i = 0; i< arr.length - 1; i++){
                json[k] = {};
                json[k]['username'] = arr[i][0];
                json[k]['password'] = arr[i][1];
                json[k]['email'] = arr[i][2];
                json[k]['age'] = arr[i][3];
                json[k]['sex'] = arr[i][4];
                k++;
            }

            var j = [];
            j.push(json);

            var jsondata = JSON.stringify(j);
            //console.log(jsondata);

            $.ajax({
                type:"POST",
                url:"__URL__/addUsers",
                dataType:"json",
                async : false,
                data:{
                    jsondata:jsondata
                },
                success:function(data){
                    alert(data.msg);
                   // table.showtable();
                    // bstable($("#add-user-classinfo").html());
                },error: function (jqXHR) {
                    alert("failed"+jqXHR.status);
                }
            });

        });
    });


</script>